	@font-face {
		font-family: electronicFont;
		src: url(../../style/font/DS-DIGIT-4.ttf);
	}
	ul {
		list-style-type: none;
	}
	.swiper-box {
		width: 100%;
		height: 100%;
		position: relative;
		// background-color: #fff;
		background: url('../../assets/bg.png') no-repeat center;
		background-size: cover;
		.wrap-box{
			height: calc(100% - 4.375rem);
			width: 100%;
			// background-color: #000911;
			.grid-content{
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-around;
				width: 100%;
				height: 100%;
				padding: 0 20px;
				.card{
					width: 100%;
					background-color: #00000066;
					border: 1px solid #00000066;
					backdrop-filter: blur(16px);
					position: relative;
				}
				.title-list{
					display: flex;
					align-items: center;
					padding-bottom: 0.5rem;
					border-bottom: 1px solid #3e3d3d;
					.shu{
						width: 4px;
						height: 20px;
						background-color: #4e6ef2;
						margin-right: 8px;
					}
					.name{
						color: #fff;
						font-size: 16px;
					}
				}
			}
		}
		.nav {
			width: 100%;
			height: 4.375rem;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #000911;
			// position: absolute;
			// top: 0;
			// z-index: 999999999999;
			background: url('../../assets/img/head.png') no-repeat center;

			.nav_left {
				display: flex;
				// justify-content: space-around;
				align-items: center;
				width: 33.33%;
				padding-left: 1.25rem;

				.time {
					font-size: 1.75rem;
					color: #fff;
					font-family: electronicFont;
					font-weight: bold;
				}

				.date {
					display: flex;
					justify-content: space-between;
					align-items: center;
					color: #c0dbef;
					font-size: 0.875rem;
					margin-left: 1.25rem;

					.week {
						margin-right: 0.375rem;
					}
				}

				.weather {
					padding: 0 0.5rem;
					color: #c59771;
					margin: 0 0.875rem 0 2.5rem;
					font-size: 0.875rem;
					border-left: 1px solid #51565a;
					border-right: 1px solid #51565a;
				}

				.temperature {
					color: #01dbdb;
					font-size: 0.875rem;
				}
			}

			.nav_title {
				width: 33.33%;

				.img {
					width: 3.375rem;
					height: 3.375rem;
				}

				.image {
					width: 3.5rem;
					height: 1.5625rem;
					margin-right: 6px;
				}

				display: flex;
				justify-content: center;
				align-items: center;
				text-align: center;
				color: #fff;
				font-size: 1.75rem;
			}

			.nav_right {
				width: 33.33%;
				display: flex;
				align-items: center;
				justify-content: flex-end;

				.address {
					// padding-right: 10px;
					display: flex;
					color: #eee;
					font-size: 0.875rem;
				}

				.weather {
					padding: 0 0.5rem;
					color: #c59771;
					margin: 0 0.875rem 0 1.25rem;
					font-size: 0.875rem;
					border-left: 1px solid #51565a;
					border-right: 1px solid #51565a;
				}

				.temperature {
					color: #01dbdb;
					font-size: 0.875rem;
					padding-right: 1.875rem;
				}
			}
		}
		}